<template>
  <div>
    <el-progress
      style="float: right; margin-top: 15px"
      :width="100"
      type="circle"
      :format="formmt"
      :percentage="percentage"
    ></el-progress>
  </div>
</template>

<script>
import myMethods from "../utils/myMethod/index";
import { mapState } from "vuex";
export default {
  data() {
    return {
      timeText: "20:00",
      percentage: 100
    };
  },
  mounted() {
    this.timeStart();
  },
  methods: {
    formmt() {
      return this.timeText;
    },
    fillZero(num) {
      return num < 10 ? "0" + num : num;
    },
    timeStart() {
      let totalSec = this.totalTime * 60;
      let residualSec = totalSec;
      let interver = setInterval(() => {
        let min = Math.floor(residualSec / 60);
        let sec = residualSec % 60;
        this.timeText = myMethods.fillZero(min) + ":" + myMethods.fillZero(sec);
        this.percentage = (residualSec / totalSec) * 100;
        if (residualSec == 0) {
          clearInterval(interver);
          // console.log(this.checkedList, this.randList);
          let score = myMethods.getScore(this.checkedList, this.randList);
          this.$parent.timeOver(totalSec + ":00", score);
        } else if (this.timeStop) {
          clearInterval(interver);
        }
        residualSec--;
      }, 1000);
    },
  },
  computed: {
    ...mapState("test", ["totalTime", "checkedList", "randList", "timeStop"]),
  },
};
</script>

<style scoped>
</style>